<template>
  <TableWidget ref="tableBox" :pagination="props.pagination" :columns="props.columns" :load="props.loadData"
               :tool-actions="props.toolActions" :has-select="false" :hide-pageable="false" style="flex: 1">
    <template v-slot:toolHeader>
      <slot name="toolHeader" />
    </template>
    <template v-slot:actionBefore>
      <slot name="actionBefore" />
    </template>
  </TableWidget>
</template>

<script setup lang="ts">

import {effect, onMounted, ref, toRaw} from "vue";
import TableWidget from "@/widget/TableWidget.vue";
import router from "@/router";
import TableHeaderWidget from "@/widget/TableHeaderWidget.vue";

const bread = ref();
const current = ref();
const tableBox = ref();

interface Pagination {
  current: number,
  pageSize: number,
  total: number,
  sizes?: any,
}

const props = withDefaults(defineProps<{
  loadData?: any,
  rootPath?: any,
  detailLabel?: string,
  columns: any,
  pagination: Pagination,
  triggerPath?: any,
  search?: any,
  toolActions?: any,
}>(), {
  columns: [],
});

const buildSearchParams = (searchData: SearchItem[] | undefined) => {
  const params: Record<string, any> = {};
  if (searchData) {
    searchData.forEach(item => {
      if (item.value) {
        params[item.name] = toRaw(item.value);
      }
    })
  }
  return params;
}

const loadCurrent = async () => {
  if (props.loadData) {
    tableBox.value?.refreshData({
      path: current.value,
      ...buildSearchParams(props.search)
    })
  }
}

effect(() => {
  current.value = {
    id: router.currentRoute.value.path,
    name: router.currentRoute.value.meta.title,
  };
})

onMounted(() => {
  // current.value = props.rootPath;
  loadCurrent();
})

const addPathInfo = (item: any) => {
  if (bread.value) {
    bread.value.addPathInfo(item);
  }
}

defineExpose({
      addPathInfo,
    }
)

</script>

<style>
.hi-bread-root-lay {
  display: flex;
  flex-direction: column;
  flex: 1;
  width: 100%;
  height: 100%;
}

.hi-bread-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 12px 16px 24px 16px;
}

</style>
